import React from 'react';
import { message } from 'antd';
import Api from 'Utils/api';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import VR_TYPE from 'Constants/vrType';
import { BROWSER_MODE } from 'Constants/webConstants';
import Article from '../../Components/Article';
import { RESOURCE_HOST } from '../../../../constants/config';
import './index.scss';

class VrDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      record: {},
      mediaType: 'video',
      isVideoStop: false
    };
    const { mode } = props;
    this.isVertical = BROWSER_MODE.isVertical(mode);
  }
  componentWillMount() {
    this.initData();
  }

  initData() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.props.params.id}`,
      success: (json) => {
        this.setState({
          record: json,
          mediaType: json.media_type
        }, () => {
          const { mediaType } = this.state;
          if (mediaType === VR_TYPE.video) {
            this.vrVideo = new VRView.Player('#vrview', {
              width: '100%',
              height: this.isVertical ? '530' : '350',
              video: `${RESOURCE_HOST}${json.media}`,
              is_stereo: false,  //区分是mono还是stereo
            });
          } else if (mediaType === VR_TYPE.img) {
            this.vrImg = new VRView.Player('#vrview', {
              width: '100%',
              height: this.isVertical ? '530' : '350',
              image: `${RESOURCE_HOST}${json.media}`,
              is_stereo: false,  //区分是mono还是stereo
            });
          }
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  handleClose() {
    this.props.dispatch(routerActions.push('/display/vr'));
  }
  render() {
    const { record } = this.state;
    if (this.isVertical) {
      return (
        <Article
          title={record.title}
          createTime={record.modify_time}
          desc={
            <div>
              <div className="v-video-detail-play">
                <div id="vrview" className="vr" />
              </div>
              <p className="v-content-p">
                {this.state.record.content ? <span dangerouslySetInnerHTML={{ __html: this.state.record.content.replace(/\n/g, '<br/>') }} /> : ''}
              </p>
            </div>
          }
        />
      );
    }

    return (
      <Article
        title={record.title}
        createTime={record.modify_time}
        desc={
          <div>
            <div className="video-detail-play">
              <div id="vrview" className="vr" />
            </div>
            <p>
              {this.state.record.content ? <span dangerouslySetInnerHTML={{ __html: this.state.record.content.replace(/\n/g, '<br/>') }} /> : ''}
            </p>
          </div>
        }
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(VrDetail);
